<template>
  <section>
    <search-box>
      <div>
        <div class="search-box m-bottom10">
          <div class="search-input">
            <el-input v-model="customer_id" placeholder="请输入客户ID"></el-input>
          </div>
          <div class="search-input">
            <el-input v-model="user_id" placeholder="请输入用户名称"></el-input>
          </div>
        </div>
        <div class="search-box">
          <div class="search-input">
            <el-select v-model="search_item" @change="search_list[search_item].value = ''">
              <el-option v-for="(value, key) in search_list" :key="key" :value="key" :label="value.label"></el-option>
            </el-select>
          </div>
          <div class="search-input">
            <el-input v-model="search_list[search_item].value"></el-input>
          </div>
          <div class="search-input m-left20">
            <el-button type="primary" @click="FnGetNodeList(1)">查询</el-button>
          </div>
        </div>
      </div>
    </search-box>

    <el-table :data="node_list" border stripe>
      <el-table-column prop="name" label="节点名称"></el-table-column>
      <el-table-column prop="cluster_id" label="集群ID"></el-table-column>
       <el-table-column prop="vm_id" label="vm_id"></el-table-column>
       <el-table-column prop="vm_name" label="vm_name"></el-table-column>
       <el-table-column prop="host_name" label="host_name"></el-table-column>
       <el-table-column prop="nat_public_ip" label="出网IP"></el-table-column>
      <el-table-column prop="status" label="节点状态"></el-table-column>
      <el-table-column prop="vc_cluster_name" label="存储群集"></el-table-column>
      <el-table-column label="节点资源请求量/使用量（%）">
        <template #default="scope">
          <div>CPU: {{ scope.row.requests?scope.row.requests.cpu:'--' }}</div>
          <div>内存: {{ scope.row.requests?scope.row.requests.memory:'--' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="节点IP">
        <template #default="scope">
          <div>公: {{ scope.row.public_ip }}</div>
          <div>私: {{ scope.row.private_ip }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="节点类型"></el-table-column>
      <el-table-column prop="source" label="节点来源"></el-table-column>
      <el-table-column prop="tunnel_address" label="Tunnel"></el-table-column>
      <el-table-column prop="tunnel_port" label="端口"></el-table-column>
      <!-- <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column> -->
      <el-table-column label="操作" min-width="150px">
        <template #default="scope">
          <el-button 
            class="p-0" 
            type="text" 
            @click="FnControl(scope.row)"
            :disabled="FnBtnDisabled('control')">控制台</el-button>
          <el-button 
            class="p-0" 
            type="text" 
            @click="FnShowPwd(scope.row)"
            :disabled="FnBtnDisabled('checkPassword')">查看密码</el-button>
          <el-button
                  class="p-0"
                  type="text"
                  v-if="scope.row.type == 'master'"
                  @click="FnChangeVmName(scope.row)"
                  :disabled="FnBtnDisabled('changeVmName')">更新vm_name</el-button>
          <el-button
                  class="p-0"
                  type="text"
                  v-if="scope.row.type == 'worker' && scope.row.status == 'error'"
                  @click="FnDeleteNode(scope.row)"
                  :disabled="FnBtnDisabled('deleteNode')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:currentPage="page_index"
        :page-size="page_size"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </section>
</template>

<script>
import searchBox from '../../../components/search-box.vue'
import Service from '@/service/cluster/node.js'
import {authBtnDisabled} from '@/utils/auth.js'
import { ElMessageBox } from 'element-plus'
export default {
  components: { searchBox },
  data() {
    return {
      search_item: "",
      customer_id: "",
      user_id: "",
      search_list: {
        // cluster_name: {label: "集群名称", value: ""},
        node_id: { label: "节点ID", value: ""},
        cluster_id: {label: "集群ID", value: ""},
        name: {label: "节点名称", value: ""},
      },
      node_list: [],
      page_index: 1,
      page_size: 10,
      total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.FnGetNodeList()
    },
    FnGetNodeList(page) {
      if(page) this.page_index = page
      // if(!this.customer_id || !this.user_id) {
      //   this.$message.warning("请输入客户ID和用户名称")
      //   return
      // }
      let reqData = {
        customer_id: this.customer_id,
        user_id: this.user_id,
        pageNumber: this.page_index,
        pageSize: this.page_size,
      }
      if(this.search_list[this.search_item].value) reqData[this.search_item] = this.search_list[this.search_item].value
      Service.get_node_list(reqData).then(resData => {
        if(resData.code == "Success") {
          this.node_list = resData.data.nodes
          this.total = resData.data.total
        }
      })
    },
    FnShowPwd(row) {
      let reqData = {
        node_id: row.node_id,
        username: this.$store.state.userInfo.loginName
      }
      Service.get_password(reqData).then(resData => {
        if(resData.code == "Success") {
          this.$alert(resData.data.plain_text, 'root账号密码', {
            confirmButtonText: '确定',
            callback: () => {}
          })
        }
      })
    },
    FnChangeVmName(row) {
      let reqData = {
        vm_id: row.vm_id,
        vm_source_type: 'cck'
      }
      Service.change_vm_name(reqData).then(resData => {
        if(resData.code == "Success") {
          this.$message.success(resData.msg)
          this.FnGetNodeList()
        } else {
          this.$message.error(resData.msg)
        }
      })
    },
    FnControl(row) {
      let url = window.location.origin + `/console/${row.vm_id}/centos/${row.node_name}`
      window.open(url, '_blank')
    },
    FnBtnDisabled(key) {
      return authBtnDisabled(key, this.$route.meta.name)
    },
    FnDeleteNode(row) {
      ElMessageBox.confirm('是否删除当前节点？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let reqData = {
          node_id: row.node_id
        }
        Service.delete_node(reqData).then(resData => {
          if(resData.code == "Success") {
            this.$message.success('删除任务已下发')
            this.FnGetNodeList()
          }
        })

      })
    }
  },
  created() {
    if(this.$route.query.id) {
      this.search_item = 'cluster_id'
      this.search_list.cluster_id.value = this.$route.query.id
      this.customer_id = this.$route.query.customer_id
      this.user_id = this.$route.query.user_id
    } else {
      this.search_item = 'node_id'
    }
    this.FnGetNodeList()
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
}
.m-bottom10 {
  margin-bottom: 10px;
}
.search-input {
  width: 220px;
  margin-right: 20px;
  position: relative;
  .require-icon {
    position: absolute;
    right: 8px;
    top: 6px;
    color: #DA3B18;
    font-size: 20px;
  }
}
.page-box {
  margin-top: 10px;
  text-align: right;
}
</style>